<template>
  <div class="cron">
    <el-form label-width="auto" v-model="editData1">
      <el-row :gutter="12">
        <el-col :span="12">
          <el-form-item label="任务组">
            <yu-select
              select
              :options="data.sysTaskGroup"
              v-model:value="editData.groupId"
              lab="groupName"
              val="groupId"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="任务名称">
            <el-input
              v-model="editData.taskName"
              placeholder="任务名称"
            ></el-input
            >s
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="调用类型">
            <yu-select
              select
              dictCode="rootType"
              v-model:value="editData.taskType"
              placeholder="POST/GET"
            ></yu-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="执行时间">
            <el-input v-model:value="editData.taskCron" placeholder="执行时间">
              <template #suffix>
                <yu-icon
                  @click="changeCron"
                  iconName="danchuang"
                  class="cron_suffix"
                />
              </template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="调用地址URL">
            <el-input
              v-model="editData.taskUrl"
              placeholder="调用地址URL"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="参数传递">
        <el-input
          v-model="editData.taskParam"
          type="textarea"
          rows="6"
          placeholder="JSON格式参数例如:{'key1':'value1','key2':'value2'}"
        ></el-input>
      </el-form-item>
      <div class="submit-class">
        <el-button-group>
          <el-button @click="celBtn">取消</el-button>
          <el-button type="primary" @click="saveBtn">确定</el-button>
        </el-button-group>
      </div>
    </el-form>
    <yu-dialog :data="data.dialogConfig" v-model:isShow="data.isShow">
      <task-cron
        v-model:value="editData.taskCron"
        v-model:isShow="data.isShow"
      ></task-cron>
    </yu-dialog>
  </div>
</template>

<script setup>
import cron from './Cron.vue';
import taskCron from './TaskCron.vue';
import { reactive, ref, toRef, getCurrentInstance, onMounted } from 'vue';
const { proxy } = getCurrentInstance();
const data = reactive({
  sysTaskGroup: [],
  dialogConfig: {},
  isShow: false,
  taskCron: {},
});
const props = defineProps({
  isShow: { type: Boolean, default: false },
  // editData: { type: Object, default: {} },
});
const emits = defineEmits(['update:isShow', 'search']);
const celBtn = () => {
  emits('update:isShow', false);
};
const changeCron = () => {
  data.dialogConfig.width = '800px';
  data.dialogConfig.height = '400px';
  data.isShow = true;
};
const saveBtn = () => {
  proxy.$api.system.editSysTask(props.editData).then(res => {
    if (res.code != -1) {
      proxy.$message({
        type: 'success',
        message: res.msg,
      });
      // props.isShow = false;
      // emit('querySysTaskGroup');
    } else {
      // 关闭对话框
      proxy.$message({
        type: 'success',
        message: res,
      });
    }
  });
};
const getSysTaskGroup = async () => {
  data.sysTaskGroup = await proxy.$api.system.getSysTaskGroupDict();
};
onMounted(() => {
  //菜单查询
  getSysTaskGroup();
});
</script>

<style lang="scss" scoped>
.cron {
  padding: 10px;
  .submit-class {
    text-align: center;
    padding-top: 20px;
  }
  .cron_suffix {
    font-size: x-large;
    cursor: pointer;
  }
}
</style>
